<template>
  <div class="bg-gray">
    <b-container>
      <b-row class="justify-content-center align-content-center">

        <b-col cols="12" md="8" class="text-center mb-2 mt-4">
          <h4 class="text-overflow">{{item.title}}</h4>
        </b-col>
        <b-col cols="12" md="8">
          <h5 class="color-number font-weight-bold">价格：￥{{item.price}}</h5>
          <p class="mb-0">邮费：￥{{item.postage}}</p>
          <hr>
        </b-col>
        <b-col cols="12" md="8">
          <p>{{item.description}}</p>
        </b-col>
        <b-col cols="12" md="8">
          <b-row v-for="(fileObject,index) in item.files">
            <b-col cols="12">
              <b-img :src="genUrl(fileObject.filename)" fluid-grow/>
            </b-col>
          </b-row>

        </b-col>
        <b-col cols="12" md="8" class="text-right my-3">
          <span>发布于：{{formattime}}</span>
        </b-col>
        <b-col cols="12" md="8" v-if="show">
          <p class="my-2">
            <b-avatar :src="genavatar" :variant="user.avatarcolor" :to="gotouser" size="50px"/>
            <span class="ml-2">{{user.nickname}}</span>

            <b-button variant="danger" class="float-right px-3 my-1" @click="buy">购买</b-button>
            <b-button variant="info" class="float-right mr-2 px-3 my-1" @click="tochat">聊聊</b-button>
            <b-button variant="warning" class="float-right mr-2 px-3 my-1" @click="fav">收藏</b-button>
          </p>
        </b-col>
        <b-col cols="12" md="8" v-if="showBuy">
          <b-form-radio-group v-model="selected">
            <b-row class="m-1 mb-2 px-1 my-card my-md-2" v-for="(rece,index) in reces">
              <b-col cols="10" class="my-auto px-1">
                <h5 class="mb-0 mt-1">{{rece.name}}</h5>
                <h6 class="mb-0 mt-1">{{rece.phone}}</h6>
                <p class="m-0">{{rece.address}} {{rece.detail}}</p>
              </b-col>

              <b-col cols="2" class="text-right px-1">
                <b-form-radio size="lg" :value="rece.receid" class="mt-4 mr-0"></b-form-radio>
              </b-col>
            </b-row>
          </b-form-radio-group>
          <p class="text-center mt-2">

            <b-button variant="primary" class="px-3 mr-2" @click="placeOrder">下单</b-button>
            <b-button class="px-3" @click="showBuy = false">取消</b-button>
          </p>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

<script>
  import urlconfig from "../urlconfig";

  export default {
    name: "Item",
    data() {
      return {
        showBuy: false,
        item: '',
        user: '',
        reces: [],
        selected: '',
        show:true,
      }
    },
    methods: {
      makeToast(msg, res = true) {
        this.$bvToast.toast(msg, {
          title: res ? '操作成功!' : '操作失败！',
          variant: res ? 'primary' : 'danger',
          solid: true,
          autoHideDelay: 5000,
        })
      },
      buy() {
        this.$ajax.post('/user/getReceivings', {uuid: this.$store.state.uuid}).then(resp => {
          let data = resp.data
          if (data.code === 200) {
            this.reces = data.data
            this.showBuy = true
          } else {
            this.makeToast(data.msg, false)
          }
        }).catch(err => {
          this.makeToast('请求失败', false)
        })
      },
      init() {
        this.$ajax.post('/item/listitem', {itemid: this.$route.params.itemid}).then(resp => {
          let data = resp.data
          if (data.code === 200) {
            this.item = data.data
            if (this.item.status > 1){
              this.show = false
            }
            //re get
            this.$ajax.post('/user/getUserInfo', {uuid: this.item.uuid}).then(resp => {
              let data = resp.data
              if (data.code === 200) {
                this.user = data.data
              } else {
                this.makeToast(data.msg, false)
              }
            }).catch(err => {
              this.makeToast('请求失败', false)
            })
          } else {
            this.makeToast(data.msg, false)
          }
        }).catch(err => {
          this.makeToast('请求失败', false)
          console.log(err);
        })

      },
      genUrl(filename) {
        return urlconfig.baseUrl + urlconfig.fileResources + filename
      },
      placeOrder() {
        if (this.selected !== '') {
          let data = {
            to: this.$store.state.uuid,
            from: this.user.uuid,
            itemid: this.item.itemid,
            receid: this.selected
          }
          this.$ajax.post('/order/placeOrder', data).then(resp => {
            let data = resp.data
            if (data.code === 200) {
              this.makeToast(data.msg)
              this.$router.push('/orders/buy')
            } else {
              this.makeToast(data.msg, false)
            }
          }).catch(err => {
              this.makeToast('请求失败', false)
            }
          )
        } else {
          this.makeToast('请选择收货地址', false)
        }
      },
      tochat() {
        this.$router.push( '/chat/' + this.user.uuid)
      },
      fav(){
        this.$ajax.post('/item/addfav',{itemid:this.item.itemid,uuid:this.$store.state.uuid}).then(resp=>{
          let data = resp.data
          if (data.code ===200){
            this.makeToast(data.msg)
          }else{
            this.makeToast(data.msg,false)
          }
        }).catch(err=>{
          this.makeToast("请求失败",false)
        })
      }
    },

    computed: {
      formattime() {
        let date = new Date(this.item.createtime)
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
        let hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
        let min = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
        let sec = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        return '' + year + '年' + month + '月' + day + '日' + hour + ':' + min + ':' + sec
      },
      genavatar() {
        return urlconfig.baseUrl + urlconfig.avatarResource + this.user.avatarpath
      },
      gotouser() {
        return '/user/' + this.user.uuid
      },



    },
    mounted() {
      this.init()
    }
  }
</script>

<style scoped>
  .max-height {
    max-height: 300px;
    max-width: 100%;
  }

  .text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .my-card {
    background: #ffffff;
    border-radius: 5px;
    box-shadow: #6e6e6e 1px 1px 5px;
  }
</style>